<template>
  <Modal
    title="添加"
    :value="value"
    :mask-closable="true"
    :footer-hide="true"
    @input="$emit('input', $event)"
  >
    <Form
      ref="formLkyClass"
      :model="formLkyClass"
      :rules="ruleValidate"
      label-position="right"
      :label-width="80"
    >

      <FormItem label="所属学院" prop="name1">
        <Select v-model="coid" style="width:200px"  @on-open-change="onOpenChangeCollege" @on-change="onOpenChangeMajor">
          <Option v-for="item in collegeList" :value="item.id" :key="item.id">
            {{ item.name }}
          </Option>
        </Select>
      </FormItem>
      <FormItem label="所属专业" prop="name2">
        <Select v-model="formLkyClass.mid" style="width:200px">
          <Option v-for="item in majorList" :value="item.id" :key="item.id">
            {{ item.name }}
          </Option>
        </Select>
      </FormItem>
      <FormItem label="班级名称" prop="name">
        <Input type="text" v-model="formLkyClass.name" placeholder="班级名称"/>
      </FormItem>
      <FormItem label="班级编号" prop="class_number">
        <Input type="text" v-model="formLkyClass.class_number" placeholder="班级编号"/>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit('formLkyClass')">提交</Button>
        <Button @click="handleReset('formLkyClass')" style="margin-left: 8px">重置</Button>
      </FormItem>
    </Form>
  </Modal>
</template>
<script>
import { save } from '@/api/lky/lkyClass'
import { createModelObj } from '@/libs/util'
// 学院查询、专业查询
import { queryAll } from '@/api/lky/lkyCollege'
import { queryAllM } from '@/api/lky/lkyMajor'

export default {
  name: 'Add',
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      collegeList: [],
      coid: '',
      majorList: [],
      formLkyClass: {
        id: '',
        name: '',
        class_number: '',
        creation_time: '',
        update_time: '',
        mid: ''
      },
      ruleValidate: {
        name: [
          { required: true, message: '该值不能为空', trigger: 'blur' },
          { type: 'string', max: 20, message: '长度最长为20', trigger: 'blur' }
        ],
        class_number: [
          { required: true, message: '该值不能为空', trigger: 'blur' },
          { type: 'string', max: 20, message: '长度最长为20', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onOpenChangeCollege () {
      queryAll().then(res => {
        this.collegeList = res.data
        this.formLkyClass.mid = ''
      })
    },
    onOpenChangeMajor (coid) {
      queryAllM({ 'coid': this.coid }).then(res => {
        this.majorList = JSON.parse(JSON.stringify(res.data))
      })
    },
    handleSubmit (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          save(Object.assign({}, createModelObj(this.formLkyClass, 'lkyClass'))).then(
            res => {
              if (res) {
                this.$emit('addRow', res.row)
                this.$emit('input', false)
                this.handleReset(name)
              }
            }
          )
        } else {
          this.$Message.error('验证失败!')
        }
      })
    },
    handleReset (name) {
      this.coid = ''
      this.formLkyClass.mid = ''
      this.$refs[name].resetFields()
    }
  },
  // 这里
  mounted () {
    this.onOpenChangeCollege()
    this.onOpenChangeMajor()
  }
}
</script>
